<template>
  <div>
    <el-table border :data="skuList">
      <el-table-column type="index" label="序号" align="center" width="80" />
      <el-table-column label="名称" prop="skuName" />
      <el-table-column label="描述" prop="skuDesc" />
      <el-table-column label="默认图片">
        <template v-slot="{row}">
          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight" />
      <el-table-column label="价格(元)" prop="price" />
      <el-table-column label="操作" width="280">
        <template v-slot="{row}">
          <el-tooltip v-if="row.isSale === 0" content="上架" placement="top">
            <el-button type="success" icon="el-icon-top" size="mini" @click="skuOnSale(row)" />
          </el-tooltip>
          <el-tooltip v-else content="下架" placement="top">
            <el-button type="danger" icon="el-icon-bottom" size="mini" @click="skuCancelSale(row)" />
          </el-tooltip>
          <el-tooltip content="更新SKU" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="editSpuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="查看详情" placement="top">
            <el-button type="info" icon="el-icon-info" size="mini" @click="getOneSkuInfo(row.id)" />
          </el-tooltip>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="真的要删除此SKU吗？"
            @onConfirm="deleteOneSkuInfo(row)"
          >
            <!-- content属性是提示内容  placement在什么位置 显示提示-->
            <el-tooltip slot="reference" content="删除SKu" placement="top">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
              />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination style="margin-top:10px" :current-page="page" :page-sizes="[3, 5, 10, 20]" :page-size="limit" align="center" layout="prev, pager, next, jumper, -> , total, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <!-- 查看sku抽屉 -->
    <el-drawer
      title="SKU信息查看"
      :visible.sync="drawer"
      :direction="direction"
      size="45%"
    >
      <el-row :gutter="20">
        <el-col
          :span="3"
          :offset="4"
        >
          <div class="grid-content bg-purple">SKU名称</div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">{{ skuInfo.skuName }} </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="3"
          :offset="4"
        >
          <div class="grid-content bg-purple">SKU描述</div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">{{ skuInfo.skuDesc }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="3"
          :offset="4"
        >
          <div class="grid-content bg-purple">SKU价格</div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">{{ skuInfo.price }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="3"
          :offset="4"
        >
          <div class="grid-content bg-purple">平台属性</div>
        </el-col>
        <el-col :span="17">
          <div class="grid-content bg-purple">
            <el-tag v-for="skuAttrValue in skuInfo.skuAttrValueList" :key="skuAttrValue.id" type="success">{{ skuAttrValue.valueName }}</el-tag>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="3"
          :offset="4"
        >
          <div class="grid-content bg-purple">图片列表</div>
        </el-col>
        <el-col :span="17">
          <el-carousel height="200px" style="text-align:center">
            <el-carousel-item v-for="skuImage in skuInfo.skuImageList" :key="skuImage.id">
              <el-image style="width:200px" :src="skuImage.imgUrl" :alt="skuImage.imgName" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { reqGetAllSkuList, reqSkuOnSale, reqSkuCancelSale, reqDelOneSku, reqGetOneSkuInfo } from '@/api/product/sku'
export default {
  name: 'SkuList',
  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      skuList: [],
      drawer: false,
      direction: 'rtl',
      skuInfo: ''
    }
  },
  mounted() {
    this.getSkuList()
  },
  methods: {
    // 查看sku
    async getOneSkuInfo(id) {
      this.drawer = true
      const res = await reqGetOneSkuInfo(id)
      if (res.code === 200) {
        this.skuInfo = res.data
      } else {
        this.$message.error('获取sku信息失败')
      }
    },
    // 4.删除sku
    async deleteOneSkuInfo(row) {
      const res = await reqDelOneSku(row.id)
      if (res.code === 200) {
        this.$message.success('删除sku成功...')
        this.getSkuList()
      } else {
        this.$message.error('删除sku失败...')
      }
    },
    // 2.上架sku
    async skuOnSale(row) {
      const res = await reqSkuOnSale(row.id)
      if (res.code === 200) {
        this.$set(row, 'isSale', 1)
      }
    },
    // 3.下架sku
    async skuCancelSale(row) {
      const res = await reqSkuCancelSale(row.id)
      if (res.code === 200) {
        this.$set(row, 'isSale', 0)
      }
    },
    // 1.获取sku列表
    async getSkuList() {
      const { page, limit } = this
      const res = await reqGetAllSkuList({ page, limit })
      if (res.code === 200) {
        this.skuList = res.data.records
        this.total = res.data.total
      } else {
        this.$message.error('获取sku数据失败...')
      }
    },
    // 以下两个方法是分页相关
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.limit = val
      this.getSkuList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val
      this.getSkuList()
    }
  }
}
</script>

<style lang="scss">
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
</style>
